<template>
    <div class="search-result">
        <van-list
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
        >
            <van-cell v-for="(article,index) in list" :key="index" :title="article.title" />
        </van-list>
    </div>
</template>

<script>
import { getSearchResults } from '@/apis/search'

export default {
    props: {
        searchText: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            loading:false,
            finished:false,
            list:[],
            page:'1',
            per_page:'20',
            error:false
        }
    },
    methods: {
        async onLoad() {

            try {
                const {data} = await getSearchResults({
                    page:this.page,
                    per_page:this.per_page,
                    q:this.searchText
                })
                const {results} = data.data

                this.list.push(...results)
                this.loading = false
                if (results.length) {
                    this.page++
                } else {
                    this.finished = true
                }
            } catch (error) {
                this.error = true
                this.loading = false
            }
            
        }
    }
}
</script>

<style lang="less" scoped>

</style>